<template>
    <div class="schart-box">
        
        <schart class="schart" canvasId="pie" :options="options3"></schart>
    </div>
</template>

<script>
import { queryecharts } from '../../api/cate';
import Schart from 'vue-schart';
export default {
    name: 'basecharts',
    components: {
        Schart
    },
    data: function () {
        return {
            tableData: [],
            options3: {
                type: 'pie',
                title: {
                    text: '食物分类统计饼状图'
                },
                legend: {
                    position: 'left'
                },
                bgColor: '#fbfbfb',
                labels: [],
                datasets: [
                    {
                        data: [3,2,4,5]
                    }
                ]
            }
        };
    },
    created() {
        this.initComm();
    },
    methods: {
        initComm() {
            queryecharts()
                .then((res) => {
                    this.tableData = res.data.echarts;
                    this.options3.labels = res.data.echarts;
                    console.log('res.data.echarts :>> ', res.data.echarts);
                    var i = 0;
                    for (i = 0; i < res.data.echarts.length;i++) {
                        console.log('res.data.echarts[i].count :>> ', res.data.echarts[i].count);
                        console.log('res.data.echarts[i].cate_name :>> ', res.data.echarts[i].cate_name);
                        this.options3.datasets[0].data[i]=res.data.echarts[i].count;
                        this.options3.labels[i] = res.data.echarts[i].cate_name;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>


<style scoped>
.schart-box {
    display: inline-block;
    margin: 20px;
}
.schart {
    width: 600px;
    height: 400px;
}
.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
</style>